<html>

<head>
    <script src="jquery-3.2.1.min.js"></script>
    <script>
        $(function () {
            $('button:first').click(function () {

                $('#dv_animation').animate({ left: '200px' }, 1200);
            });
            $('button:eq(1)').click(function () {

                $('#dv_animation').animate({ left: '20px',height:'150px',width:'+=200px' }, 1500);
            });
            $('button:eq(2)').click(function () {

                $('#dv_animation').animate({ width:'toggle' }, 1500);
            });
            $('button:eq(3)').click(function () {

               var dv=  $('#dv_animation');
               dv.animate({height:'+=100px'},1200);
               dv.animate({width:'+=100px'},1200);
               dv.animate({left:'+=100px'},1200);
               dv.animate({top:'+=100px',width:'-=100px',height:'-=80',fontSize:'+=15px'},1200);
            });
            $('button:eq(4)').click(function () {

                $('#dv_animation').stop(true,false);
            });
        });
    </script>
    <style>
        .animation_dv {
            width: 100px;
            height: 100px;
            background-color: blue;
            color: wheat;
            position: absolute;
        }
    </style>
</head>

<div>
    <ul>
        <li> <button type="button">初始动画</button></li>
        <li> <button type="button">多个属性动画</button></li>
        <li> <button type="button">预定义属性动画</button></li>
        <li> <button type="button">队列动画</button></li>
        <li> <button type="button">停止动画</button></li>
    </ul>
   
    <div id="dv_animation" class="animation_dv">动画模板</div>
</div>

</html>